<template>
  <div>
    <h1>增删改查</h1>
  </div>
  <input type="text" /><button @click="add">添加</button>
  <div v-for="(item, index) in list" :key="item.id" v-stripe="index">
    {{ item.goods_name }}---{{ item.price }}---<button @click="del(item.id)">
      删除
    </button>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
// let autoID = 4;
let list = ref<[]>([]);

import { getlist, dellist, addlist } from "@/utils/https";
//获取列表
getlist()
  .then((res:any) => {
    res.data.forEach((item: any) => {
      list.value.push(item);
    });
    console.log(res);
  })
  .catch((err) => {
    console.log(err);
  });

//删除
function del(id:number) {
  console.log(id);
  dellist({ id: id })
    .then((res) => {
      console.log(res);
    })
    .catch((err) => {
      console.log(err);
    });
}
//添加
function add() {
  addlist(
  //   {
  //   good_name:"冰红茶",
  //   stock:33,
  //   price:3,
  //   status:2,
  //   sold:89,
  //   img:""
  // }
)
    .then((res) => {
      console.log(res);
    })
    .catch((err) => {
      console.log(err);
    });
}
</script>
<style lang='less' scoped>
</style>